import React, { Component } from 'react';
import { Card, Col, Row } from 'antd';
import "./style.scss";
import { connect } from "react-redux";

class IndexCardGroup extends Component {
  render() {
    const { data } = this.props;

    if (data) {
      return (
        <div className='umui-horizontal-scroll umui-index-card-group'>

          <Row gutter={16}>
            {data.map((item, index) => (
              <Col span={4} key={index} >
                <Card title={item.title} bordered={true} className='card'>
                  {item.value}
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      );
    } else {
      return (
        <div></div>
      )
    }
  }
}

function mapStateToProps(state) {
  return {
    pathname: state.router.location.pathname,
    search: state.router.location.search,
    hash: state.router.location.hash,
  }
}

export default connect(mapStateToProps)(IndexCardGroup);
